import React from 'react';
import { connect } from 'dva'
import { Page } from 'components'
import queryString from 'query-string'
import List from './List'
import Filter from './Filter'
import Conditions from './Conditions';
import ExportLogs from './ExportLogs';
import Detail from '../reportConfigs/Detail';
import Memo from './Memo';

const Reports = ({ location, dispatch, report, loading }) => {
  location.query = queryString.parse(location.search)
  const {
    items,
    pagination,
    currentItem,
    modalConditionVisible,
    modalHistoryVisible,
    modalDetailVisible,
    modalMemoVisible,
    currentTenant
  } = report
  const { pageSize } = pagination

  const listProps = {
    dataSource: items,
    loading: loading.effects['report/query'],
    pagination,
    location,
    onChange(page) {
      const { query, pathname } = location
      dispatch({
        type: 'report/query',
        payload: {
          pageSize: page.pageSize,
          current: page.current
        }
      })
    },
    onExport(item) {
      let queryParamJson = item.queryParamJson;
      if (!queryParamJson || queryParamJson === null || queryParamJson == "" || queryParamJson == "[]") {
        dispatch({
          type: 'report/doExport',
          payload: {
            currentItem: item
          }
        })
      } else {
        dispatch({
          type: 'report/showModalConditions',
          payload: {
            currentItem: item
          }
        });
      }
    },
    onShowHistory(item) {
      dispatch({
        type: 'report/showExportLogs',
        payload: {
          currentItem: item
        }
      });
    },
    onShowDetail(item) {
      dispatch({
        type: 'report/showDetail',
        payload: {
          currentItem: item
        }
      });
    },
    onShowMemo(item) {
      dispatch({
        type: 'report/showModalMemo',
        payload: {
          currentItem: item
        }
      });
    }
  }

  const filterProps = {
    filterItems: [
      {
        id: 'reportName',
        type: 'text',
        placeholder: '请输入报表名称'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'report/query',
        payload: {
          ...value
        }
      })
    }
  }

  const conditionsProps = {
    item: currentItem,
    visible: modalConditionVisible,
    maskClosable: false,
    destroyOnClose: true,
    title: `${currentItem.reportName}`,
    wrapClassName: 'vertical-center-modal',
    okText: '导出',
    cancelText: '关闭',
    currentTenant: currentTenant,
    onOk(data) {
      // currentItem.queryParamJson = data;
      dispatch({
        type: 'report/doExport',
        payload: {
          currentItem: currentItem,
          queryParams: data
        }
      });
      dispatch({ type: 'report/hideModal' });
    },
    onCancel() {
      dispatch({ type: 'report/hideModal' });
    }
  }

  const exportLogsProps = {
    item: currentItem,
    visible: modalHistoryVisible,
    maskClosable: true,
    destroyOnClose: true,
    footer: null,
    title: `导出历史：${currentItem.reportName}`,
    cancelText: '取消',
    onCancel() {
      dispatch({ type: 'report/hideModal' });
    }
  }

  const detailProps = {
    item: currentItem,
    visible: modalDetailVisible,
    maskClosable: true,
    destroyOnClose: true,
    title: `${currentItem.reportName}`,
    wrapClassName: 'vertical-center-modal',
    width: 1000,
    cancelText: '取消',
    footer: null,
    onCancel() {
      dispatch({ type: 'report/hideModal' });
    }
  }

  const memoProps = {
    item: currentItem,
    visible: modalMemoVisible,
    maskClosable: true,
    destroyOnClose: true,
    footer: null,
    title: `${currentItem.reportName}`,
    cancelText: '取消',
    onCancel() {
      dispatch({ type: 'report/hideModal' })
    }
  }

  return (
    <Page inner>
      {/* <Filter {...filterProps} /> */}
      <List {...listProps} /> {modalConditionVisible && <Conditions {...conditionsProps} />}
      {modalHistoryVisible && <ExportLogs {...exportLogsProps} />}
      {modalDetailVisible && <Detail {...detailProps} />}
      {modalMemoVisible && <Memo {...memoProps} />}
    </Page>
  )
};

export default connect(({ report, loading }) => ({ report, loading }))(Reports)
